<template>
	<div class="mainBox">
		<!-- 下拉框查询 -->
		<el-form :inline="true" :model="ruleForm" ref="ruleForm" label-width="110px" class="formBox">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="门店名称" prop="storeName">
						<el-input placeholder="门店名称" v-model="ruleForm.storeName"></el-input>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="8">
					<el-form-item label="门店编码" prop="storeCode">
						<el-input placeholder="门店编码" v-model="ruleForm.storeCode"></el-input>
					</el-form-item>
				</el-col> -->
				<el-col :span="8">
					<el-form-item class="secondRow_formItem">
						<el-button type="primary" @click="submitForm" icon="el-icon-search">查询</el-button>
						<el-button type="success" @click="add">新增门店</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<div class="dialog">

			<el-dialog :title="title" :visible.sync="centerDialogVisible" width="80%" right>
				<el-form :inline="true" ref="form" :model="addForm" label-width="110px" class="formBox">
					<el-form-item label="门店名称">
						<el-input placeholder="门店名称" v-model="addForm.storeName"></el-input>
					</el-form-item>

					<el-form-item label="门店地址">
						<el-input placeholder="门店地址" v-model="addForm.storeAddress"></el-input>
					</el-form-item>

				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button @click="centerDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="submit" v-loading="addStoreLoading">确 定</el-button>
				</span>
			</el-dialog>
		</div>

		<!-- 表格 -->
		<div class="tableBox">
			<el-table :data="tableData" style="width:100%" stripe border v-loading="tableLoading">
				<el-table-column type="index" label="序号" width="80"></el-table-column>
				<el-table-column prop="storeName" label="门店名称" center></el-table-column>
				<el-table-column prop="id" show-overflow-tooltip label="门店编码" center></el-table-column>
				<el-table-column prop="storeAddress" label="门店地址" center></el-table-column>
				<el-table-column prop="createTime" label="创建时间" center></el-table-column>

				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>

		</div>
	</div>
</template>
<script>
import { storeList, storeAdd, storeDel, storeUpdate } from "@/api/user";
export default {
  data() {
    return {
    tableLoading: true,
    title:"",
	  addStoreLoading:false,
      is_update: "",
      storeId: "",
      ruleForm: {
        storeName: "",
        storeCode: ""
      },

      addForm: {
        storeName: "",

        storeAddress: ""
      },
      centerDialogVisible: false,

      tableData: []
    };
  },

  mounted() {
    this.storeList();
  },
  methods: {
    submit() {
		this.addStoreLoading=true
      if (this.is_update == 0) {
        storeAdd({
          storeName: this.addForm.storeName,
          storeAddress: this.addForm.storeAddress
        }).then(res => {
          if (res.code == 200) {
			this.$message.success("新增成功");
			this.addStoreLoading=false
            this.centerDialogVisible = false;
            this.storeList();
          } else {
			this.$message.error("新增失败");
			this.addStoreLoading=false
          }
        });
      } else {
        storeUpdate({
          storeName: this.addForm.storeName,
          storeAddress: this.addForm.storeAddress,
          id: this.storeId
        }).then(res => {
          if (res.code == 200) {
			this.$message.success("修改成功");
			this.addStoreLoading=false
            this.centerDialogVisible = false;
            this.storeList();
          } else {
			this.$message.error("修改失败");
			this.addStoreLoading=false
          }
        });
      }
    },
    storeList() {
      storeList({current:1,size:10000}).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.tableLoading = false;
        } else {
          this.$message.error("获取门店失败");
          this.tableLoading = false;
        }
      });
    },
    handleSizeChange(val) {},
    handleEdit(row) {
       this.title="修改门店"
      this.centerDialogVisible = true;
      this.is_update = 1;
      this.addForm.storeName = row.storeName;
      this.addForm.storeAddress = row.storeAddress;
      this.storeId = row.id;
    },
    //删除门店
    handleDelete(row) {
      if(row.storeName==="总部"){
        this.$message.error("此数据为默认数据，无法删除")
        return; 
      }
      let that = this;
      this.$confirm("确定删除该门店, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          storeDel({ id: row.id })
            .then(res => {
              if (res.code == 200) {
                that.$message.success("删除成功");
                this.storeList();
              } else {
                that.$message.error("删除失败");
              }
            })
            .catch(res => {
              that.$message.error("服务器错误");
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    add() {
    this.centerDialogVisible = true;
    this.title="新增门店"
	  this.addForm.storeName=""
	  this.addForm.storeAddress=""
      this.is_update = 0;
    },
    handleCurrentChange(val) {},
    submitForm() {
       storeList({current:1,size:10000,storeName:this.ruleForm.storeName}).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.tableLoading = false;
        } else {
          this.$message.error("获取门店失败");
          this.tableLoading = false;
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.formBox {
  margin-top: 20px;
}

.tableBox {
  margin: 45px 20px 0 20px;
}

.el-button--mini,
.el-button--mini.is-round {
  padding: 3px 10px;
}
</style>
